import React, { MouseEventHandler } from 'react'
import Box from '@material-ui/core/Box'
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography'
import Skeleton from '@material-ui/lab/Skeleton'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'

// text-overflow: -o-ellipsis-lastline;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// line-clamp: 2;
// -webkit-box-orient: vertical;
const useStyles = makeStyles({
  card: {
    '& $cardCoverBox': {
      '& img': {
        transition: 'transform 0.5s ease-in-out',
      },
    },
    '&:hover': {
      '& $cardCoverBox img': {
        transform: 'scale(1.2)',
      },
    }
  },
  cardCoverBox: {
    height: 140,
    overflow: 'hidden',
  }
})



interface IProps {
  cover?: string
  title?: string
  content?: string
  onClick?: MouseEventHandler<Element>
}

const BlogItem: React.FC<IProps> = ({
  cover, title, content, onClick
}) => {
  const classes = useStyles()

  return <Card
    className={classes.card}
    onClick={onClick}
  >
    <CardActionArea>
      {
        !cover ? (
          <Skeleton
            className={classes.cardCoverBox}
            variant="rect"
            animation="wave"
          />
        ) : (
            <div className={classes.cardCoverBox}>
              <CardMedia
                component='img'
                alt={title}
                image={cover}
              />
            </div>
          )
      }

      <CardContent>
        <Typography
          gutterBottom
          noWrap
          variant="h5"
          component="h2"
        >
          {!title ? <Skeleton /> : title}
        </Typography>
        <Typography
          noWrap
          variant="body2"
          color="textSecondary"
          component="p"
        >
          {!content ? <Skeleton /> : content}
        </Typography>
      </CardContent>
    </CardActionArea>
    {/* <CardActions>
      <Button size="small" color="primary">
        Share
      </Button>
      <Button size="small" color="primary">
        Learn More
      </Button>
    </CardActions> */}
  </Card>
}

export default BlogItem